<script setup>
const navList = [
  {
    title: '关于菜园子',
    path: '/about'
  },
  {
    title: '登录/注册',
    path: '/login'
  },
  {
    title: '签到有礼',
    path: '/sign'
  },
  {
    title: '我的订单',
    path: '/order'
  },
  {
    title: '会员有礼',
    path: '/vip'
  },
  {
    title: '帮助中心',
    path: '/help'
  },
  {
    title: '社区',
    path: '/community'
  }
]
const footerList = [
  {
    title: '购物指南',
    text: ['导购演示', '订单操作', '购物流程', '会员注册', '常见问题', '联系客服']
  },
  {
    title: '服务保障',
    text: ['正品保证', '7天无理由放心退', '7x24小时客户服务', '7天无理由随心换']
  },
  {
    title: '支付方式',
    text: ['23家主流网银支付', '支付宝、银联等支付', '信用卡支付', '零钱支付']
  },
  {
    title: '售后服务',
    text: ['换货服务', '退货政策', '退货流程', '退款方式和时效']
  },
  {
    title: '关于惠农',
    text: ['关于我们', '服务协议', '隐私协议', '规则说明']
  }
]
</script>

<template>
  <div style="width: 1440px; margin: 0 auto;">
    <div class="nav">
      <div class="nav-right">
        <router-link v-for="(item) in navList" :key="item" :to="item.path" class="nav-right-item">
          {{ item.title }}
        </router-link>
      </div>
      <div class="nav-left">
        <router-link class="nav-left-item" to="/message">
          消息通知
        </router-link>
        <router-link class="nav-left-item" to="/cart">
          购物车
        </router-link>
      </div>
    </div>
    <div class="main-container">
      <router-view></router-view>
    </div>

    <div class="footer">
      <div v-for="(item,index) in footerList" :key="item.title" class="footer-item">
        <h3>{{ item.title }}</h3>
        <div v-for="(text) in item.text" :key="text" style="font-size: 14px">{{ text }}</div>
      </div>
      <div class="footer-item" style="font-weight: bold;align-self: center">
        <div>客户服务 400-008-8688</div>
        <div>商务洽谈 0731-88189999</div>
        <div>媒体合作 0731-88189999</div>
      </div>
      <div style="display: flex;gap: 20px">
        <div class="footer-QR">
          <img alt="微信二维码" src="../static/996.png" />
          <div style="font-size: 12px">扫一扫获取更多咨询</div>
        </div>
        <div class="footer-wx">
          <img alt="微信二维码" src="../static/997.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.nav {
  z-index: 99999;
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  font-size: 16px;
  height: 56px;
  font-weight: bold;
  background-color: $fruit-main-color;
  width: 1440px;
  font-family: YouYuan;

  &-right {
    width: 80%;
    display: flex;
    justify-content: space-around;
    padding-right: 15%;

    &-item {
      padding: 0 10px;
    }
  }

  &-left {
    display: flex;
    justify-content: center;
    width: 20%;
    gap: 20px;

    &-item {
      padding: 0 10px;
    }
  }
}

.main-container {
  padding-top: 60px;
  min-height: 90vh;
}

.footer {
  width: 100%;
  height: 200px;
  background-color: $fruit-main-color;
  display: flex;
  justify-content: space-around;
  padding-top: 40px;
  font-size: 18px;

  &-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  &-QR {
    width: 110px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: center;
  }

  &-wx {
    width: 100px;
    height: 100px;
    align-self: center;
  }
}
</style>